
<template>
  <div class="app">
    <div class="left">
      <ul class="list">
        <li
          v-for="(item, index) in arr"
          :key="item"
          :class="index === n ? 'blue' : ''"
          @click="n = index"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="right">
      <v-header></v-header>
      <div class="center">
        <h2>会员管理</h2>
        <table  >
          <thead>
          <tr>
            <th class="xuhao">
              序号
            </th>
            <th class="dianying">
              电影名称
            </th>
            <th class="jiage">
              价格
            </th>
            <th class="time">
              上映时间
            </th>
            </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in table">
          <td>{{index+1}}</td>
           <td>{{item.name}}</td>
          <td>{{item.price |filterPrice}}</td>
            <td>{{item.time|filterTime}}</td></tr>
          </tbody>
        </table>
      </div>
      <v-footer></v-footer>
    </div>
  </div>
</template>

<script>
  
import vHeader from "./components/vHeader.vue";
import vFooter from "./components/vFooter.vue";
export default {
  data() {
    return {
      arr: ["管理中心", "商品管理", "会员管理", "订单管理"],
      n: 0,
      table: [
        { id: 1, name: "姜子牙", price: 30.0, time: 1607928388132 },
        { id: 2, name: "我和我的祖国", price: 45.0, time: 1307928388132 },
        { id: 3, name: "我和我的家乡", price: 32.1, time: 1407928388132 },
      ],
    };
  },
  components: {
    vHeader,
    vFooter,
  },
};
</script>

<style>
table{
  width: 80%;
  border: 1px solid #ccc;
  margin: 0 auto;
}
td,th{
  border-right: 1px solid #ccc;
   border-top: 1px solid #ccc;
   padding: 5px;


}
 tbody tr{
    height: 50px;
 
    
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.app {
  width: 100vw;
  height: 100vh;
  display: flex;
}
.left {
  background-color: #00152a;
  width: 200px;
}
.right {
  display: flex;
  flex: 1;
  flex-direction: column;
  text-align: center;
}
.list li {
  line-height: 20px;
  color: white;
  text-align: center;
  line-height: 40px;
  height: 40px;
}
.blue {
  background-color: #0077b9;
}
.center {
  flex: 1;
  font-weight: bold;
  border: 10px solid #dddddd;
  border-right: none;
}
</style>
